<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>现代网页示例</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#8B5CF6',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
            .hover-lift {
                transform: translateY(0);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .hover-lift:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
    <!-- 导航栏 -->
    <header class="fixed top-0 w-full bg-white shadow-md z-50 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-code text-primary text-2xl"></i>
                    <span class="text-xl font-bold text-dark">现代网页</span>
                </div>
                
                <!-- 桌面导航 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#hero" class="text-gray-700 hover:text-primary transition-colors duration-200">首页</a>
                    <a href="#features" class="text-gray-700 hover:text-primary transition-colors duration-200">功能</a>
                    <a href="#services" class="text-gray-700 hover:text-primary transition-colors duration-200">服务</a>
                    <a href="#testimonials" class="text-gray-700 hover:text-primary transition-colors duration-200">评价</a>
                    <a href="#contact" class="text-gray-700 hover:text-primary transition-colors duration-200">联系我们</a>
                </nav>
                
                <!-- 移动端菜单按钮 -->
                <button class="md:hidden text-gray-700 focus:outline-none" id="menu-toggle">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div class="md:hidden hidden bg-white border-t" id="mobile-menu">
            <div class="container mx-auto px-4 py-2">
                <nav class="flex flex-col space-y-3 py-3">
                    <a href="#hero" class="text-gray-700 hover:text-primary py-2 transition-colors duration-200">首页</a>
                    <a href="#features" class="text-gray-700 hover:text-primary py-2 transition-colors duration-200">功能</a>
                    <a href="#services" class="text-gray-700 hover:text-primary py-2 transition-colors duration-200">服务</a>
                    <a href="#testimonials" class="text-gray-700 hover:text-primary py-2 transition-colors duration-200">评价</a>
                    <a href="#contact" class="text-gray-700 hover:text-primary py-2 transition-colors duration-200">联系我们</a>
                </nav>
            </div>
        </div>
    </header>

    <!-- 英雄区域 -->
    <section id="hero" class="pt-32 pb-20 md:pt-40 md:pb-28 bg-gradient-to-br from-blue-50 to-indigo-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row items-center justify-between gap-12">
                <div class="md:w-1/2">
                    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight text-dark mb-6">
                        打造<span class="text-primary">现代</span>、<span class="text-secondary">响应式</span>的<br>
                        网页体验
                    </h1>
                    <p class="text-lg text-gray-600 mb-8 max-w-lg">
                        我们提供专业的网页设计与开发服务，帮助您的业务在数字世界中脱颖而出。
                        从概念到实现，我们致力于创造令人惊叹的用户体验。
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="#contact" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 text-center">
                            立即开始
                        </a>
                        <a href="#features" class="bg-white hover:bg-gray-50 text-primary font-medium py-3 px-8 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 text-center border border-primary/20">
                            了解更多
                        </a>
                    </div>
                    <div class="mt-8 flex items-center space-x-4">
                        <div class="flex -space-x-2">
                            <img src="https://picsum.photos/200/200?random=1" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://picsum.photos/200/200?random=2" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                            <img src="https://picsum.photos/200/200?random=3" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-white">
                        </div>
                        <div>
                            <div class="flex items-center text-yellow-500 mb-1">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                                <span class="ml-2 text-gray-700 font-medium">4.8/5</span>
                            </div>
                            <p class="text-sm text-gray-600">来自超过1000+客户的评价</p>
                        </div>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="relative">
                        <div class="absolute -inset-0.5 bg-gradient-to-r from-primary to-accent rounded-3xl blur-lg opacity-30 animate-pulse"></div>
                        <img src="https://picsum.photos/800/600?random=10" alt="现代网页设计" class="relative rounded-3xl shadow-2xl hover-lift">
                        <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-xl shadow-lg">
                            <div class="flex items-center space-x-3">
                                <div class="bg-green-100 rounded-full p-2">
                                    <i class="fa fa-check text-green-600"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-800">项目完成</p>
                                    <p class="text-sm text-gray-500">98% 的成功率</p>
                                </div>
                            </div>
                        </div>
                        <div class="absolute -top-6 -right-6 bg-white p-4 rounded-xl shadow-lg">
                            <div class="flex items-center space-x-3">
                                <div class="bg-blue-100 rounded-full p-2">
                                    <i class="fa fa-users text-blue-600"></i>
                                </div>
                                <div>
                                    <p class="font-medium text-gray-800">满意客户</p>
                                    <p class="text-sm text-gray-500">1000+ 人</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 合作伙伴 -->
    <section class="py-12 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <p class="text-center text-gray-500 mb-8">值得信赖的合作伙伴</p>
            <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
                <div class="text-gray-400 text-2xl font-bold hover:text-primary transition-colors duration-300">Google</div>
                <div class="text-gray-400 text-2xl font-bold hover:text-primary transition-colors duration-300">Microsoft</div>
                <div class="text-gray-400 text-2xl font-bold hover:text-primary transition-colors duration-300">Apple</div>
                <div class="text-gray-400 text-2xl font-bold hover:text-primary transition-colors duration-300">Amazon</div>
                <div class="text-gray-400 text-2xl font-bold hover:text-primary transition-colors duration-300">Meta</div>
            </div>
        </div>
    </section>

    <!-- 功能区域 -->
    <section id="features" class="py-20 bg-light">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <span class="text-primary font-semibold">我们的优势</span>
                <h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold text-dark mt-2 mb-4">为什么选择我们的网页设计</h2>
                <p class="text-gray-600">我们提供全方位的网页设计与开发服务，从概念到上线，让您的网站在竞争中脱颖而出。</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 功能卡片 1 -->
                <div class="bg-white p-8 rounded-xl shadow-lg hover-lift">
                    <div class="bg-blue-100 p-3 rounded-lg inline-block mb-6">
                        <i class="fa fa-mobile text-primary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-dark mb-3">完全响应式设计</h3>
                    <p class="text-gray-600">我们的网站在任何设备上都能完美展示，从手机到桌面电脑，提供一致的优质体验。</p>
                </div>
                
                <!-- 功能卡片 2 -->
                <div class="bg-white p-8 rounded-xl shadow-lg hover-lift">
                    <div class="bg-purple-100 p-3 rounded-lg inline-block mb-6">
                        <i class="fa fa-bolt text-accent text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-dark mb-3">性能优化</h3>
                    <p class="text-gray-600">我们注重网站性能，通过优化代码和资源，确保您的网站加载速度快，用户体验流畅。</p>
                </div>
                
                <!-- 功能卡片 3 -->
                <div class="bg-white p-8 rounded-xl shadow-lg hover-lift">
                    <div class="bg-green-100 p-3 rounded-lg inline-block mb-6">
                        <i class="fa fa-paint-brush text-secondary text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-dark mb-3">精美设计</h3>
                    <p class="text-gray-600">我们的设计团队创造独特且专业的视觉体验，帮助您的品牌在数字世界中留下深刻印象。</p>
                </div>
                
                <!-- 功能卡片 4 -->
                <div class="bg-white p-8 rounded-xl shadow-lg hover-lift">
                    <div class="bg-red-100 p-3 rounded-lg inline-block mb-6">
                        <i class="fa fa-search text-red-500 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-dark mb-3">SEO优化</h3>
                    <p class="text-gray-600">我们的网站设计遵循SEO最佳实践，帮助您的网站在搜索引擎中获得更好的排名。</p>
                </div>
                
                <!-- 功能卡片 5 -->
                <div class="bg-white p-8 rounded-xl shadow-lg hover-lift">
                    <div class="bg-yellow-100 p-3 rounded-lg inline-block mb-6">
                        <i class="fa fa-shield text-yellow-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-dark mb-3">安全保障</h3>
                    <p class="text-gray-600">我们注重网站安全，采用最新的安全技术和最佳实践，保护您的网站和用户数据。</p>
                </div>
                
                <!-- 功能卡片 6 -->
                <div class="bg-white p-8 rounded-xl shadow-lg hover-lift">
                    <div class="bg-indigo-100 p-3 rounded-lg inline-block mb-6">
                        <i class="fa fa-life-ring text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-dark mb-3">专业支持</h3>
                    <p class="text-gray-600">我们提供全天候的技术支持，确保您的网站稳定运行，及时解决任何问题。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 服务区域 -->
    <section id="services" class="py-20 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <span class="text-primary font-semibold">我们的服务</span>
                <h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold text-dark mt-2 mb-4">提供全方位的网页解决方案</h2>
                <p class="text-gray-600">从简单的静态网站到复杂的电子商务平台，我们能够满足您的各种需求。</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                <div class="relative">
                    <div class="absolute -inset-0.5 bg-gradient-to-r from-primary to-accent rounded-3xl blur-lg opacity-20"></div>
                    <img src="https://picsum.photos/800/600?random=20" alt="网页设计服务" class="relative rounded-3xl shadow-xl hover-lift">
                    <div class="absolute top-8 -right-8 bg-white p-5 rounded-xl shadow-lg">
                        <div class="flex items-center space-x-3">
                            <div class="text-3xl font-bold text-primary">99%</div>
                            <div class="text-gray-600">客户满意度</div>
                        </div>
                    </div>
                </div>
                
                <div>
                    <ul class="space-y-6">
                        <li class="flex items-start space-x-4">
                            <div class="bg-blue-100 rounded-full p-3 mt-1">
                                <i class="fa fa-desktop text-primary"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold text-dark mb-2">网站设计与开发</h3>
                                <p class="text-gray-600">我们为您创建美观、功能齐全的网站，满足您的业务需求和品牌形象。</p>
                            </div>
                        </li>
                        <li class="flex items-start space-x-4">
                            <div class="bg-purple-100 rounded-full p-3 mt-1">
                                <i class="fa fa-shopping-cart text-accent"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold text-dark mb-2">电子商务解决方案</h3>
                                <p class="text-gray-600">我们构建安全、高效的在线商店，帮助您扩大业务范围，增加销售额。</p>
                            </div>
                        </li>
                        <li class="flex items-start space-x-4">
                            <div class="bg-green-100 rounded-full p-3 mt-1">
                                <i class="fa fa-mobile text-secondary"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold text-dark mb-2">移动应用开发</h3>
                                <p class="text-gray-600">我们开发原生和混合移动应用，为您的用户提供便捷的移动体验。</p>
                            </div>
                        </li>
                        <li class="flex items-start space-x-4">
                            <div class="bg-yellow-100 rounded-full p-3 mt-1">
                                <i class="fa fa-cogs text-yellow-600"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-bold text-dark mb-2">网站维护与支持</h3>
                                <p class="text-gray-600">我们提供持续的网站维护和技术支持，确保您的网站始终保持最佳状态。</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- 客户评价 -->
    <section id="testimonials" class="py-20 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <span class="text-primary font-semibold">客户评价</span>
                <h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold text-dark mt-2 mb-4">听听他们怎么说</h2>
                <p class="text-gray-600">来自我们客户的真实反馈，了解我们如何帮助他们实现业务目标。</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- 评价 1 -->
                <div class="bg-white p-8 rounded-xl shadow-lg hover-lift">
                    <div class="flex items-center text-yellow-500 mb-4">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <p class="text-gray-600 mb-6">"他们的设计团队创造了一个令人惊叹的网站，完全超出了我的期望。不仅外观精美，而且功能齐全，用户体验出色。"</p>
                    <div class="flex items-center">
                        <img src="https://picsum.photos/200/200?random=101" alt="客户头像" class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <h4 class="font-bold text-dark">张明</h4>
                            <p class="text-gray-500 text-sm">企业创始人</p>
                        </div>
                    </div>
                </div>
                
                <!-- 评价 2 -->
                <div class="bg-white p-8 rounded-xl shadow-lg hover-lift">
                    <div class="flex items-center text-yellow-500 mb-4">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div>
                    <p class="text-gray-600 mb-6">"与他们合作是一次愉快的经历。他们理解我们的需求，提供了专业的建议，并且按时交付了高质量的网站。强烈推荐！"</p>
                    <div class="flex items-center">
                        <img src="https://picsum.photos/200/200?random=102" alt="客户头像" class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <h4 class="font-bold text-dark">李婷</h4>
                            <p class="text-gray-500 text-sm">市场总监</p>
                        </div>
                    </div>
                </div>
                
                <!-- 评价 3 -->
                <div class="bg-white p-8 rounded-xl shadow-lg hover-lift">
                    <div class="flex items-center text-yellow-500 mb-4">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-o"></i>
                    </div>
                    <p class="text-gray-600 mb-6">"我们的电子商务网站上线后，销售额显著增长。他们不仅构建了一个美观的网站，还优化了用户体验和转化率。"</p>
                    <div class="flex items-center">
                        <img src="https://picsum.photos/200/200?random=103" alt="客户头像" class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <h4 class="font-bold text-dark">王浩</h4>
                            <p class="text-gray-500 text-sm">电商创始人</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="py-20 bg-white">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div>
                    <span class="text-primary font-semibold">联系我们</span>
                    <h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold text-dark mt-2 mb-6">准备好开始您的项目了吗？</h2>
                    <p class="text-gray-600 mb-8">无论您是需要一个全新的网站、重新设计现有网站，还是需要技术支持，我们都很乐意帮助您。请填写下面的表单，我们将尽快与您联系。</p>
                    
                    <div class="space-y-6 mb-8">
                        <div class="flex items-center space-x-4">
                            <div class="bg-blue-100 rounded-full p-3">
                                <i class="fa fa-map-marker text-primary"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-dark">地址</h3>
                                <p class="text-gray-600">北京市朝阳区建国路88号</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="bg-blue-100 rounded-full p-3">
                                <i class="fa fa-phone text-primary"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-dark">电话</h3>
                                <p class="text-gray-600">+86 10 8888 8888</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="bg-blue-100 rounded-full p-3">
                                <i class="fa fa-envelope text-primary"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-dark">邮箱</h3>
                                <p class="text-gray-600">contact@example.com</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex space-x-4">
                        <a href="#" class="bg-blue-100 hover:bg-blue-200 text-primary w-10 h-10 rounded-full flex items-center justify-center transition-colors duration-300">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="bg-blue-100 hover:bg-blue-200 text-primary w-10 h-10 rounded-full flex items-center justify-center transition-colors duration-300">
                            <i class="fa fa-wechat"></i>
                        </a>
                        <a href="#" class="bg-blue-100 hover:bg-blue-200 text-primary w-10 h-10 rounded-full flex items-center justify-center transition-colors duration-300">
                            <i class="fa fa-linkedin"></i>
                        </a>
                        <a href="#" class="bg-blue-100 hover:bg-blue-200 text-primary w-10 h-10 rounded-full flex items-center justify-center transition-colors duration-300">
                            <i class="fa fa-github"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <div class="bg-white p-8 rounded-xl shadow-lg">
                        <form id="contact-form" class="space-y-6">
                            <div>
                                <label for="name" class="block text-gray-700 font-medium mb-2">姓名</label>
                                <input type="text" id="name" name="name" placeholder="请输入您的姓名" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-300">
                            </div>
                            <div>
                                <label for="email" class="block text-gray-700 font-medium mb-2">邮箱</label>
                                <input type="email" id="email" name="email" placeholder="请输入您的邮箱" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-300">
                            </div>
                            <div>
                                <label for="subject" class="block text-gray-700 font-medium mb-2">主题</label>
                                <input type="text" id="subject" name="subject" placeholder="请输入主题" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-300">
                            </div>
                            <div>
                                <label for="message" class="block text-gray-700 font-medium mb-2">消息</label>
                                <textarea id="message" name="message" rows="5" placeholder="请输入您的消息" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-300"></textarea>
                            </div>
                            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300">
                                发送消息
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white pt-16 pb-8">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <i class="fa fa-code text-primary text-2xl"></i>
                        <span class="text-xl font-bold">现代网页</span>
                    </div>
                    <p class="text-gray-400 mb-6">我们提供专业的网页设计与开发服务，帮助您的业务在数字世界中脱颖而出。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa fa-wechat"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa fa-linkedin"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa fa-github"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-6">服务</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">网站设计</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">网站开发</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">电子商务</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">移动应用</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">SEO优化</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-6">公司</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">关于我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">团队</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">案例研究</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">博客</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-6">订阅</h3>
                    <p class="text-gray-400 mb-4">订阅我们的新闻通讯，获取最新的行业动态和公司更新。</p>
                    <form class="space-y-3">
                        <div>
                            <input type="email" placeholder="您的邮箱地址" class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors duration-300 text-white">
                        </div>
                        <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-300">
                            订阅
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 现代网页. 保留所有权利.</p>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition-colors duration-300">隐私政策</a>
                        <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition-colors duration-300">服务条款</a>
                        <a href="#" class="text-gray-500 hover:text-gray-400 text-sm transition-colors duration-300">Cookie政策</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('py-2');
                navbar.classList.remove('py-4');
                navbar.classList.add('bg-white/95');
                navbar.classList.add('backdrop-blur-sm');
            } else {
                navbar.classList.remove('py-2');
                navbar.classList.add('py-4');
                navbar.classList.remove('bg-white/95');
                navbar.classList.remove('backdrop-blur-sm');
            }
        });
        
        // 移动端菜单
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        
        menuToggle.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
            const icon = menuToggle.querySelector('i');
            if (icon.classList.contains('fa-bars')) {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            } else {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动端菜单
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                        const icon = menuToggle.querySelector('i');
                        icon.classList.remove('fa-times');
                        icon.classList.add('fa-bars');
                    }
                }
            });
        });
        
        // 表单提交
        const contactForm = document.getElementById('contact-form');
        if (contactForm) {
            contactForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 简单的表单验证
                const name = document.getElementById('name').value;
                const email = document.getElementById('email').value;
                const message = document.getElementById('message').value;
                
                if (!name || !email || !message) {
                    alert('请填写所有必填字段');
                    return;
                }
                
                // 模拟表单提交
                const submitButton = this.querySelector('button[type="submit"]');
                const originalText = submitButton.innerHTML;
                
                submitButton.disabled = true;
                submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 发送中...';
                
                setTimeout(() => {
                    // 显示成功消息
                    alert('消息发送成功！我们将尽快与您联系。');
                    
                    // 重置表单
                    this.reset();
                    
                    // 恢复按钮
                    submitButton.disabled = false;
                    submitButton.innerHTML = originalText;
                }, 1500);
            });
        }
        
        // 页面加载动画
        window.addEventListener('load', function() {
            document.body.classList.add('loaded');
        });
    </script>
</body>
</html>